<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用JavaScript脚本实现form表单的提交与重置</title>
    <meta name="author" content="huochaigun">
</head>
<body>
    <form name="myForm">
        <table align="center">
            <caption>MQTT参数设置</caption>
            <tr>
			<tr>
                <td>主机：</td>
                <td>
                   <input type="text" name="mqttHost" />
                </td>
            </tr>
            <tr>
                <td>端口：</td>
                <td>
                    <input type="number" name="mqttPort" />
                </td>
            </tr>
            <tr>
                <td>用户名：</td>
                <td>
                    <input type="text" name="mqttUsername" />
                </td>
            </tr>	
            <tr>
                <td>密码：</td>
                <td>
                    <input type="password" name="mqttPassword" />
                </td>
            </tr>			
            <!-- 以下是提交、取消按钮 -->
            <tr>
                <td colspan="2" style="text-align: center; padding: 5px;">
                    <input type="button" value="保存" onclick="submitFrom()"/>
                    <input type="button" value="清除" onclick="resetFrom()"/>
                </td>
            </tr>
        </table>
    </form>
</body>
<script>
    //提交
    function submitFrom()
    {
        //验证数据
        if(!myForm.mqttHost.value)
        {
            alert("请输入主机！");
            myForm.mqttHost.focus();
            return;
        }
 
        if(!myForm.mqttPort.value)
        {
            alert("请输入端口！");
            myForm.mqttPort.focus();
            return;
        }
		
        if(!myForm.mqttUsername.value)
        {
            alert("请输入登录密码！");
            myForm.mqttUsername.focus();
            return;
        }

        if(!myForm.mqttPassword.value)
        {
            alert("请输入登录密码！");
            myForm.mqttPassword.focus();
            return;
        }			
 
        //提交表单
        myForm.method = 'POST';
        myForm.action = "/setting";
        myForm.submit();
    }
 
    //重置
    function resetFrom()
    {
        //重置表单
        document.getElementsByName("myForm")[0].reset();
    }
</script>
</html>
